<template>
  <div class="my-padded-tb-large animate__animated animate__fadeInUp">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui blue header">搜索&nbsp;&nbsp;{{this.$store.getters.SearchValue}}&nbsp;&nbsp;的结果</h3>
          </div>
          <div class="right aligned column">
            共 <h3 class="ui orange header my-inline-block">&nbsp;{{page.total}}&nbsp;</h3> 条
          </div>
        </div>
      </div>
      <!--博客和分页-->
      <keep-alive>
        <limit-page @getList="searchBlog" :page="page"></limit-page>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import {search} from "../api/home";
  import LimitPage from "../components/LimitPage";
  export default {
    name: "Search",
    components: {LimitPage},
    data() {
      return {
        page: {},
        users: this.$store.getters.AllUser,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
      }
    },
    computed: {
      valueIsChange() {
        return this.$store.getters.SearchValue
      }
    },
    watch: {
      valueIsChange: function (val, oldVal) {
        if (val !== oldVal) {
          this.searchBlog(1)
        }
      }
    },
    activated() {
      if (this.$store.getters.SearchValue === '') {
        this.$router.push({name: 'Home'})
      } else {
        this.searchBlog(1)
      }
    },
    methods: {
      searchBlog(page) {
        let data = {
          page,
          size: 6,
          content: this.$store.getters.SearchValue
        }
        search(data).then(res => {
          if (res.code === 200) {
            this.page = res.data
            this.initBlogList()
          }
        })
      },
      initBlogList() {
        // 设置每个博客的用户信息
        this.page.list.forEach(value => {
          this.users.forEach(value1 => {
            if (value.userId === value1.id) {
              value.nickname = value1.nickname
              value.avatar = value1.avatar
            }
          })
        })
        // 设置每个博客的分类信息
        this.page.list.forEach(value => {
          this.typeList.forEach(value1 => {
            if (value.typeId === value1.id) {
              value.type = value1.name
            }
          })
        })
        // 设置每个博客的标签信息
        this.page.list.forEach(value => {
          let arr = []
          this.tagList.forEach(tagValue => {
            value.tagIds.forEach(value1 => {
              if (tagValue.id === value1) {
                arr.push(tagValue.name)
              }
            })
          })
          arr.reverse()
          value.tags = arr
        })
      },
    }
  }
</script>

<style scoped>

</style>
